<template>
    <div class="m-box">
		<div class="container">
			<div class="m-title">近期新增课程<a href="/?a=list&id=0">查看更多</a></div>
			<div class="m-list">
				<div class="m-each" v-for="(item,index) in lastNewsCourse" :key="index">
					<a class="m-e-img-a" href="#" @click.prevent="tolink(item.id)" target="_blank"><img :src="item.thumb" :alt="item.title"></a>
					<a class="m-e-title" href="#" @click.prevent="tolink(item.id)" target="_blank">{{ item.title }}</a>
					<div class="m-e-info"><i>¥{{ item.price }}</i><b>{{ item.buy }}人已购买</b></div>
				</div>	
			</div>
		</div>
	</div>
</template>
     
<script>
export default {
    name: 'HomeNewCourse',
    data:function(){
        return {
            lastNewsCourse:[]
        }
    },
    methods:{
        tolink(course_id){
            this.$router.push({name:'course',params:{id:course_id}})
        }
    },
    mounted(){
        // this.$request.get('/course').then(response=>{
        //     if( response.code == 200 ){
        //         this.lastNewsCourse = response.data;
        //     }
        // });
    }
}
</script>
    
<style>
/*首页与列表页*/
.main-index .m-title{height:30px;line-height:30px;overflow:hidden;margin:20px 0;font-size:30px;position:relative;}
.main-index .m-title a{font-size:14px;color:#888;position:absolute;top:5px;right:12px;}
.main-index .m-title a:hover{color:#666;}
.main-index .m-list{overflow:hidden;}
.main-index .m-each{width:280px;background:#fff;border:1px solid #ddd;padding-bottom:12px;float:left;margin:0 18px 20px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.main-index .m-each:nth-child(4n){margin-right:0;}
.main-index .m-each img{display:block;transition:all 0.5s ease 0s;}
.main-index .m-each img:hover{transform:scale(1.1);}
.main-index .m-e-img-a{width:280px;height:156px;overflow:hidden;display:block;margin-bottom:10px;}
.main-index .m-e-title{color:#555;font-size:14px;margin-left:10px;}
.main-index .m-e-title:hover{color:#50B0F4;}
.main-index .m-e-info{margin-left:10px;margin-top:8px;margin-right:10px;overflow:hidden;}
.main-index .m-e-info i{color:#c00;font-size:14px;font-style:normal;float:left;}
.main-index .m-e-info b{color:#999;float:right;font-weight:normal;}
</style>
     